{% extends "base.html" %}
{% block title %}Gastos{% endblock %}
{% block head %}
    {{ super() }}
    
	<script type="text/javascript" src="/assets/js/jquery.js"></script>
  	<script type="text/javascript" src="/assets/js/jquery.validate.js"></script>

 	<script>
		$(document).ready(function() {   
			$(".table-grid tr:even").addClass("alt");
		}); 
  </script>

	<!--Load the AJAX API--> 
	    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
	    <script type="text/javascript"> 
	 
	      // Load the Visualization API and the piechart package. 
	      google.load('visualization', '1.0', {'packages':['corechart']}); 
	 
	      // Set a callback to run when the Google Visualization API is loaded. 
	      google.setOnLoadCallback(drawVisualization); 
	      
		  function drawVisualization() {
		  {% if expenses != "budget_null" %}
		      drawChartTotalByCategory();
		      drawChartTotalByType();
		  {% endif %}
		  }	      
	 
	      // Callback that creates and populates a data table, 
	      // instantiates the pie chart, passes in the data and 
	      // draws it. 
	      function drawChartTotalByCategory() { 
	 
	        // Create the data table. 
	        var data1 = new google.visualization.DataTable(); 
	        data1.addColumn('string', 'Category'); 
	        data1.addColumn('number', 'Amount'); 
			data1.addRows([
			{% for categoria in total_by_category %}
				{% if loop.last %}
					['{{ categoria[0] }}', {{ categoria[1] }}]
				{% else %}
					['{{ categoria[0] }}', {{ categoria[1] }}],
				{% endif %}
			{% endfor %}	        
			]); 	 
	        // Set chart options 
	        var options1 = {'title':'Total por categoria'}; 
	 
	        // Instantiate and draw our chart, passing in some options. 
	        var chart1 = new google.visualization.PieChart(document.getElementById('chart_div1')); 
	        chart1.draw(data1, options1); 
	      } 

	      function drawChartTotalByType() { 
	 
	        // Create the data table. 
	        var data2 = new google.visualization.DataTable(); 
	        data2.addColumn('string', 'Type'); 
	        data2.addColumn('number', 'Amount'); 
			data2.addRows([
			{% for categoria in total_by_type %}
				{% if loop.last %}
					['{{ categoria[0] }}', {{ categoria[1] }}]
				{% else %}
					['{{ categoria[0] }}', {{ categoria[1] }}],
				{% endif %}
			{% endfor %}	        
			]); 	 
	        // Set chart options 
	        var options2 = {'title':'Total por tipo'}; 
	 
	        // Instantiate and draw our chart, passing in some options. 
	        var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2')); 
	        chart2.draw(data2, options2); 
	      } 

	    </script>
{% endblock %}
{% block content %}
    <h1>Gastos::{{month_name}}</h1>	
	<br>
    <table>
    	<tr>
        	<td valign="top" width="70%">
	    		<table id="table-grid" class ="table-grid">
	          		<tr>
	            		<th width="20px"></th>
	            		<th width="250px">Descripcion</th>
	            		<th width="100px">Importe</th>
	            		<th width="250px">Categoria</th>
	            		<th width="250px">Cometario</th>
	          		</tr>
	          		{% for e in expenses %}
	            	<tr id="row{{ loop.index }}">
	              		<td align="middle"><input type="checkbox" name="list" value="{{ e.key }}" id="checkbox{{ loop.index }}"/></td>
	              		<td >
	                		<div ><a href="/expense/edit?id_expense={{ e.key().id() }}">{{ e.description|escape }}</a></div>
	              		</td>
	              		<td >
	                 		{{"${:,.0f}".format(e.amount)}}
	              		</td>
	              		<td >
	                 		{{e.category.name}}
	              		</td>
	              		<td >
	                 		{{e.comment}}
	              		</td>
	            	</tr>
	          		{% endfor %}
	        	</table>
	        	<a class="newlink" href="/expense/edit?mes={{mes}}&id_expense=-1">Nuevo</a>
        	</td>
        	<td valign="top" width="30%">
	        	<table >
	        		<tr>
	        			<td>
		        			<table id="table-grid" class ="table-grid">
		        				<tr>
		        					<th colspan="2">Balance</th>
		        				</td>
		        				<tr>
		            				<td>Ingreso</td>
		            				<td>{{"${:,.0f}".format(income)}}</td>
		        				</tr>
		        				<tr>
		            				<td>Ingreso extra</td>
		            				<td>{{"${:,.0f}".format(extra_income)}}</td>
		        				</tr>
		        				<tr>
		            				<td>Total Ingreso</td>
		            				<td>{{"${:,.0f}".format(total_income)}}</td>
		        				</tr>
		        				<tr>
		            				<td>Gastos</td>
		            				<td>{{"${:,.0f}".format(total_expenses)}}</td>
		        				</tr>
		        				<tr>
		            				<td>Balance</td>
		            				{% if balansheet < 0 %}
		            					<td style="color: #FF0000"> {{"${:,.0f}".format(balansheet)}}</td>
		            				{% else %}
		            					<td> {{"${:,.0f}".format(balansheet)}}</td>
		            				{% endif %}
		        				</tr>
		        			</table>
	        			</td>
	        		</tr>
	        		<tr>
	        			<td>&nbsp</td>
	        			<td>&nbsp</td>
	        		</tr>
	        		<tr>
	        			<td>
		        			<table id="table-grid" class ="table-grid">
		        				<tr>
		        					<th colspan="2">Total por categoria</th>
		        				</td>
	          					{% for categoria in total_by_category %}
		        				<tr>
		            				<td>{{ categoria[0] }}</td>
		            				<td>{{"${:,.0f}".format(categoria[1])}}</td>
		        				</tr>
	          					{% endfor %}
		        				<tr>
		            				<td>TOTAL</td>
		            				<td>{{"${:,.0f}".format(total_expenses)}}</td>
		        				</tr>
		        			</table>
	        			</td>
	        		</tr>
	        	</table>
        	</td>
    	</tr>
    	<tr>
        	<td valign="top">
        		<div id="chart_div1" style="height: 400px;"></div>
        	</td>
			<td valign="top">
        		<div id="chart_div2" style="height: 400px;"></div>
 			</td>
    	</tr>
	</table>
{% endblock %}
